A link is a link, each time you click on it you go to the same page, right? Not so! A
text link may jump to the same place each time, but an image may link to a different
address depending on where on the image you click.An image map is a clickable image,
but unlike the standard construct of an <IMG> tag within an <A> tag, this one will
jump to a different URL according to where on the image the user clicks. There are
many ways to use this, for example you could use a single imagemap across the top of
a page as a menu bar, instead of using separate buttons in a table. A company could
display a map of the area they cover with each part of the map linking to the page of
the branch that covers that area.



Types of imagemap

There are two ways to implement an imagemap, server side imagemaps and client
side imagemaps. Server side imagemaps are the original way of doing it. The image is
contained within a normal <A HREF=></A> tag where the URL is that of a map file on
the server. Clicking on the image sends the name of the file and the coordinates
selected to the server where a script reads the map file, calculates the URL for
those coordinates and returns that document to the browser. This is useful if your
map needs to link to a CGI script anyway, such as a database, but otherwise it
involves unnecessary access to the server and makes it impossible to test your page
offline unless you have a web server and CGI installed on your Amiga.

Client side imagemaps avoid these restrictions. All of the information needed is
contained in the HTML itself and the browser determines the URL for any particular
point on the map. This makes offline page development easy and also means that the
user gets better feedback. With a server side map, the status bar displays something
like http://www.server.com/cgi-bin/imagemap?mapfile.map,x=27,y=33, which doesn't help
the user. A client side map will show the actual URL that will be linked to by that
point on the image.

A client side imagemap has two separate elements, the image and the map data. Here's
a bare bones example.

<MAP NAME="mymap">
<AREA SHAPE="RECT" COORDS="0,0,100,50" HREF="top.html" ALT="top">
<AREA SHAPE="RECT" COORDS="0,51,100,100" HREF="bottom.html" ALT="bottom">
</MAP>

<IMG SRC="mymap.gif" WIDTH="100" HEIGHT="100" ALT="Image map" USEMAP="#mymap">

This displays an image that takes you to one document if you click in the top half
and another for the bottom half. Normally you would have the map data in the same
document as the map. However, if you want to use the same data on several pages, you
can put it on the home page. This page should already be in the user's cache when
they select an imagemap on another page, so there's no network access needed. It's a
good idea to put the data before the image, if you put the image first and the page
is slow in loading the user could click on the map before the map data has been
loaded.

<IMG> has an extra attribute, USEMAP. This tells the browser that this is a client
side imagemap and to use the map data named "mymap" in the current document (remember
starting a URL with # links to a named item on the current page). The <MAP> tag only
takes one attribute, it's NAME. Within the <MAP> tag we have a number of AREA tags to
define each clickable area, each AREA tag takes the following attributes:

SHAPE
Can be one of RECT, CIRC, POLY, DEFAULT. The first three define the area as a
rectangle, circle or polygon. DEFAULT applies to all parts of the image not specified
in another AREA tag. You would normally use this for the last one.

COORDS
The coordinates of the area, this varies according to the SHAPE used. For a rectangle
the coordinates are x1,y1,x2,y2. The first pair are the coordinates of the top left,
the other refer to the bottom right corner. A circle has three coordinates x,y,r
referring to the x,y coordinates of the centre of the circle and its radius. A
polygon uses x1,y1,x2,y2,x3,y3... to specify each corner.

HREF
The URL to load when this area is clicked. If you want an area to jump nowhere, use
NOHREF. This is normally used for the default, or could be used to stop a part of the
image accepting the default action.

ALT Some browsers will display this text when the image is not loaded. People may be
visiting your site via a slow link, keep imagemaps as small as possible and provide
text alternatives wherever possible.

TARGET
The frame or window to load the new URL into. If you are using an imagemap in a menu
bar you would use this to load the document into the main window.

Apart from TARGET, all of these attributes are compulsory in the latest HTML
specification.



A more useful example

Let's look at a real world application of imagemaps that also illustrates another use
for HTML. In addition to online web pages, HTML is good for program documentation
with its inline images and hypertext links. Here we see how a client side imagemap
can make documentation even easier to use. The image is included in the normal way,
with the addition of an ISMAP attribute, the MAP tag contains all the real work. The
full source is on the CD, here are the edited highlights.

<MAP NAME="optionsmisc.map"> - First we give it a name

<AREA SHAPE="RECT" COORDS="150,21,249,42" HREF="#display" ALT="Display" onMouseOver="window.status='Display options';return true" onMouseOut="window.status='';return true">

A standard rectangular shape, covering the "Display" tab of the image links to a part
of the current page and also provides "help" text using JavaScript (see boxout).

<AREA SHAPE="RECT" COORDS="177,68,371,93" HREF="#confirmdisconnect" ALT="Confirm" onMouseOver="window.status='Ask for confirmation before disconnecting';return true" onMouseOut="window.status='';return true">

As for the tabs at the top of the window, each of the gadgets has an area defined to
link to the relevant part of the documentation.

<AREA SHAPE="RECT" COORDS="154,59,551,128" HREF="#control" ALT="Control" onMouseOver="window.status='Various control options';return true" onMouseOut="window.status='';return true">

The browser reads the map data in the order it appears, stopping at the first match
it finds. This means you may have a number of individual shapes and then a larger
shape covering them all and the spaces in between. If you click on the smaller shape
you get its link, if you click in a space you get the later link. This one covers
the Control section of the window.

<AREA SHAPE="RECT" COORDS="7,300,183,318" HREF="" ALT="Save" onMouseOver="window.status='Save the settings and exit';return true" onMouseOut="window.status='';return true">

We have to cheat a little here. If you use NOHREF you can't use onMouseover (at least
it doesn't work in AWeb or Netscape). By using an empty URL to achieve the same
result of no action when clicking on the area, you can also display help text with
onMouseOver.

<AREA SHAPE="RECT" COORDS="9,28,125,46" HREF="info.html" ALT="" onMouseOver="window.status='blah';return true" onMouseOut="window.status='';return true">

The items on the left of the display would be documented on different pages, so these
items are linked to a separate page. You can label a point in a page with
<A NAME="info"> and jump to it with <A HREF="#info"> from the same page or
<A HREF="prefs.html#info"> from another page.

<AREA SHAPE="RECT" COORDS="6,23,126,291" HREF="main" ALT="" onMouseOver="window.status='blah';return true" onMouseOut="window.status='';return true">

The whole of the left side list window is linked back to the main page, as before
this appears after the individual items in the window so acts as a default for this
section.

<AREA SHAPE="DEFAULT" HREF="" ALT="Default" onMouseOver="window.status='Click on a gadget to read its documentation';return true" onMouseOut="window.status='';return true">

Finally we have a DEFAULT shape, this is used whenever the user selects any area not
defined elsewhere. In this case it doesn't link anywhere, default areas often don't,
but it does display help information.

<IMG SRC="optionsmisc.gif" WIDTH="561" HEIGHT="338" ALT="Image map" USEMAP="#optionsmisc.map" BORDER=0>

Now the map data has been setup, all that's left is to display the image using a
normal <IMG> tag with the additional USEMAP attribute.



Boxout

Creating imagemaps

Clearly you don't want to be counting individual pixels of an image to create the
image map data. Fortunately there are several options to generate the <MAP> data with
only a few mouse clicks. here are arexx scripts for ImageFX and PPaint 7 (given away
on AFCD26) that generate the map data by "drawing" the areas on the image (I used
ImageFX for the example here). There are also a couple of independent image map
creators available on Aminet.



Boxout

JavaScript

There isn't the space for a detailed coverage of JavaScript here, just enough to
explain the usage in this example. HTML supports "events" for objects. Two of the
events for a link are onMouseOver and onMouseOut, the first occurring when you move
the mouse pointer over the object and the second when you move the mouse away again.
We use the same JavaScript command for both, window.status='text' sets the contents
of the status bar, where you would normally see the URL of the link, to "text". To
clear the status line when the mouse moves off the link, onMouseOut sets
window.status to an empty string.


Figure1: Our example documentation, note the help text in the browser's status bar.